<template>
	<view class="body-div">
		<!-- 订单列表 -->
		<view class="card-list">
			<view class="order-card">
				<!-- 商品 -->
				<view class="shop-class">
					<img class="shop-img" :src="img">
					<span class="shop-order">
						<!-- 商品名称-->
						<text class="shop-name">{{order.orSpName}}</text>
						<text class="price-shop">￥{{order.orPlayPrice+0.22}}</text>
						<view class="shop-name-text">{{order.orSpName}}:{{order.orPlayPrice}}元</view>
						<view class="bq-zc-class">账号直充</view>
					</span>
					<!-- 商品总价 -->
					<view class="shops-class">
						<text class="price-sxfk">商品总价</text>
						<text class="price-jg">￥{{order.orPlayPrice}}</text>
					</view>
					<!-- 实付 -->
					<view class="sf-class">
						<text class="price-sf">实付<text>{{order.orPlayPrice}}元</text></text>
					</view>
				</view>
			</view>
			<!--充值账号-->
			<view class="chongz-number-class">
				<text class="cz-bt-number">充值账号</text>
				<text class="cz-number">{{order.orPhone}}</text>
			</view>
			<!-- 订单号 -->
			<view class="order-number-div">
				<text class="text-number">
					<text class="order-uuid-numbber">订单编号</text>
					<text class="order-uuid">{{uuid}}</text>
					<text class="fz-order" @click="fzOck(uuid)">复制</text>
					<view class="order-time-class">
						<text>下单时间</text>
						<text class="order-time">{{order.orPlayTime}}</text>
						<!-- 支付方式-->
						<view class="play-fs-class">
							<text>支付方式</text>
							<text class="play-fs">{{order.orType}}</text>
						</view>
						<!-- 联系微信 -->
						<view class="lx-wx" @click="lxwx">
							<text>联系微信</text>
						</view>
					</view>
				</text>
			</view>
		</view>
	<!-- 	<view class="butonm">
			<view class="cu-bar bg-white tabbar border shop">
				<view class="btn-group">
					<button class="cu-btn bg-gradual-green round shadow-blur" @click="orderList">订单列表</button>
					<button class="cu-btn bg-gradual-orange round shadow-blur" @click="syetz">返回首页</button>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order:{},
				uuid: "801211210203418719383",
				img: "https://gitee.com/CodeLiQing/notes-collection/raw/master/%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/6a83bc86-bc05-483b-99c2-8aea5eb9bd27.png",
				url: this.$url + "/frontend",
			}
		},
		created() {
			this.infoOrder()
		},
		methods: {
			infoOrder() {
				this.uuid = this.$route.query.uuid
				uni.request({
					url: `${this.url}/order/info/${this.uuid}`,
					method: "GET",
					success: ({
						data
					}) => {
						if(data.code==200){
							 //获取信息成功
							this.order=data.data.cbbOrder   
						}
					}
				})
			},
			syetz() {
				uni.switchTab({
					url: "../front-page/front-page"
				})
			},
			orderList() {
				uni.switchTab({
					url: "../my/my"
				})
			},
			lxwx() {
				uni.setClipboardData({
					data: "ZhengGuoLei1010",
					success: function() {
						uni.showToast({
							title: '复制微信号成功',
							duration: 2000
						});
					}
				});
			},
			fzOck(uuid) {
				uni.setClipboardData({
					data: uuid,
					success: function() {
						uni.showToast({
							title: '订单号复制成功',
							duration: 2000
						});
					}
				});
			}
		},
		onLoad: (option) => {
			//this.uuid = option.uuid
		}
	}
</script>
<style scoped>
	.butonm {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.lx-wx text {
		line-height: 32px;
	}

	.lx-wx {
		position: relative;
		width: 60%;
		margin-top: 4%;
		text-align: center;
		-webkit-box-shadow: 0 0 10px rgba(234, 234, 234, 1.0);
		height: 32px;
		left: 20%;
	}

	.play-fs {
		position: relative;
		left: 5%;
		border-bottom: 1px solid #c8c8c8;
	}

	.play-fs-class {
		position: relative;
		margin-top: 5%;
	}

	.order-time-class {
		position: absolute;
		margin-top: 5%;
		width: 100%;
	}

	.order-time {
		position: absolute;
		margin-left: 5%;
	}

	.fz-order {
		position: absolute;
		right: 0;
		
		color: red;
	}

	.order-uuid {
		position: absolute;
		margin-left: 5%;
		width: 65%;
		top: 5rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.order-uuid-numbber {
		position: relative;
	}

	.text-number {
		position: absolute;
		left: 5%;
		width: 90%;
		top: 10%;
	}

	.order-number-div {
		position: relative;
		width: 90%;
		font-size: 13px;
		margin-top: 2%;
		border-radius: 10px 10px 10px 10px;
		height: 160px;
		background-color: #ffffff;
		left: 5%;
	}

	.cz-number {
		position: relative;
		left: 10%;
	}

	.cz-bt-number {
		position: relative;
		line-height: 50px;
		left: 5%;
	}

	.chongz-number-class {
		position: relative;
		width: 90%;
		font-size: 13px;
		margin-top: 2%;
		border-radius: 10px 10px 10px 10px;
		height: 50px;
		background-color: #ffffff;
		left: 5%;
	}

	.price-sf text {
		left: 10%;
		position: relative;
		color: #ff5077;
	}

	.price-sf {
		font-size: 15px;
		font-weight: 700;
		position: absolute;
		right: 15%;
	}

	.sf-class {
		position: relative;
		margin-top: 15%;
	}

	.price-jg {
		position: absolute;
		right: 0;
		color: #bfbfbf;
	}

	.price-sxfk {
		position: absolute;
		left: 0;
	}

	.shops-class {
		margin-top: 5%;
		position: relative;
		width: 90%;
	}

	.play-button {
		position: absolute;
		width: 50%;
		font-size: 10px;
		color: red;
		right: 15%;
		margin-top: 20%;
		border-radius: 20px 20px 20px 20px;
		border: 1px solid red;
		background-color: #ffffff;
	}

	.price-sxfk {
		position: absolute;
		right: 10%;
		margin-top: 3%;
		font-size: 10px;
		font-weight: 1000;
	}

	.bq-zc-class {
		top: 5px;
		position: relative;
		width: 34%;
		color: #9e9e9e;
		font-size: 10px;
		text-align: center;
		background-color: #f9f9f9;
	}

	.shop-name-text {
		position: relative;
		font-size: 10px;
	}

	.price-shop {
		color: red;
		position: absolute;
		right: 0;
	}

	.shop-name {
		position: relative;
		font-size: 10px;
	}

	.shop-order {
		width: 50%;
		margin-left: 5%;
		position: absolute;
	}

	.shop-img {
		position: relative;
		width: 35%;
		border-radius: 10px 10px 10px 10px;
	}

	.shop-class {
		position: relative;
		top: 15%;
		left: 5%;
		;
	}

	.bt-card text {
		position: absolute;
		right: 10%;
		color: red;
		font-size: 13px;
	}

	.bt-card {
		top: 10%;
		position: relative;
		left: 5%;
		;
	}

	.bt-card span {
		position: relative;
		left: 2%;
		;
	}

	.ioc-card {
		position: relative;
		width: 15px;
	}

	.order-card {
		position: relative;
		width: 90%;
		left: 5%;
		margin-top: 2%;
		height: 200px;
		-webkit-box-shadow: 0 0 10px rgba(234, 234, 234, 1.0);
		border-radius: 10px 10px 10px 10px;
		background-color: #ffffff;
	}

	.card-list {
		position: relative;
		width: 100%;
	}

	.body-div {
		width: 100%;
	}
</style>
